<template>
	<wsPage :title="$t('index.SystemOverview')">
		<div slot="page_operate">
			<Button type="ghost" @click="query"><Icon type="refresh"></Icon><span>{{$t('index.refresh')}}</span></Button>
		</div>
		<div>
			<Row style="margin-left: 2%;">
				<Col span="6">
					<div class="page-row-col-icon">
						<!-- <Icon type="android-clipboard" size="46" color="#6cd5a1"></Icon> -->
					</div>
					<div class="page-row-col-span">
						<span class="page-row-col-order">{{$t('index.totalOrders')}}</span>						
						<span class="page-row-col-order-number">{{numForm.amount}}</span>
					</div>
				</Col>
				<Col span="6">
					<div class="page-row-col-icon">
						<!-- <Icon type="social-yen" size="40" color="#6cd5a1" style="margin-top: 4px;"></Icon> -->
					</div>
					<div class="page-row-col-span">
						<span class="page-row-col-order">{{$t('index.totalSales')}}</span>
						<span class="page-row-col-order-number">{{amountForm.symbol}}{{amountForm.amount}}</span>
					</div>
				</Col>
				<Col span="6">
					<div class="page-row-col-icon">
						<!-- <Icon type="social-yen" size="40" color="#6cd5a1" style="margin-top: 4px;"></Icon> -->
					</div>
					<div class="page-row-col-span">
						<span class="page-row-col-order">{{$t('index.totalSalesYesterday')}}</span>
						<span class="page-row-col-order-number">{{yesterdayForm.symbol}}{{yesterdayForm.amount}}</span>
					</div>
				</Col>
				<Col span="6">
					<div class="page-row-col-icon">
						<!-- <Icon type="social-yen" size="40" color="#6cd5a1" style="margin-top: 4px;"></Icon> -->
					</div>
					<div class="page-row-col-span">
						<span class="page-row-col-order">{{$t('index.totalSalesPastSevenDays')}}</span>
						<span class="page-row-col-order-number">{{weekForm.symbol}}{{weekForm.amount}}</span>
					</div>
				</Col>
		    </Row>
		</div>
		<Row>
			<Col span="12" style="">
				<div class="layout-content">
		            <div class="layout-content-query">
						<Form :model="queryForm"  inline>
							<FormItem>
								<!-- <Row style="border:1px solid red;">									
									<Col span="6" style="">
										<Button type="text" @click="onClickLastMonth" class="query-form-week-month">{{$t('index.lastMonth')}}</Button>
					                </Col>									
									<Col span="6">
										<Button type="text" @click="onClickLastWeek" class="query-form-week-month">{{$t('index.lastWeek')}}</Button>
									</Col>
									<Col span="6">
										<Button type="text" @click="onClickWeek" class="query-form-week-month">{{$t('index.thisWeek')}}</Button>
									</Col>
					                <Col span="6">
										<Button type="text" @click="onClickMonth" class="query-form-week-month">{{$t('index. thisMonth')}}</Button>
					                </Col>									
				                </Row> -->
								<div>
									<span>
										<Button type="text" @click="onClickLastMonth" class="query-form-week-month">{{$t('index.lastMonth')}}</Button>
									</span>
									<span>
										<Button type="text" @click="onClickLastWeek" class="query-form-week-month">{{$t('index.lastWeek')}}</Button>
									</span>
									<span>
										<Button type="text" @click="onClickWeek" class="query-form-week-month">{{$t('index.thisWeek')}}</Button>
									</span>
									<span>
										<Button type="text" @click="onClickMonth" class="query-form-week-month">{{$t('index. thisMonth')}}</Button>
									</span>
								</div>
					        </FormItem>
						</Form>
					</div>
					<div class="echarts">
						<template>
							<ve-line :data="chartData" :extend="extend" :settings="chartSettings"></ve-line>
						</template>
			    		<!--<IEcharts :option="myChart" :loading="myChartLoading" @ready="onReady" @click="onClick"></IEcharts>-->
			  		</div>
		        </div>
	     	</Col>
	     	<Col span="12">
		        <div class="layout-content">
					<div slot="query_form" class ="layout-content-query">
						<Form :model="querySaleForm"  inline >
							<FormItem>
								<!-- <Row>
									<Col span="6" >
										<Button type="text" @click="onClickLastMonth1" class="query-form-week-month">{{$t('index.lastMonth')}}</Button>
					                </Col>
									<Col span="6">
										<Button type="text" @click="onClickLastWeek1" class="query-form-week-month">{{$t('index.lastWeek')}}</Button>
									</Col>
									<Col span="6">
										<Button type="text" @click="onClickWeek1" class="query-form-week-month">{{$t('index.thisWeek')}}</Button>
									</Col>
					                <Col span="6">
										<Button type="text" @click="onClickMonth1" class="query-form-week-month">{{$t('index. thisMonth')}}</Button>
					                </Col>
				                </Row> -->
								<div>
									<span>
										<Button type="text" @click="onClickLastMonth1" class="query-form-week-month">{{$t('index.lastMonth')}}</Button>
									</span>
									<span>
										<Button type="text" @click="onClickLastWeek1" class="query-form-week-month">{{$t('index.lastWeek')}}</Button>
									</span>
									<span>
										<Button type="text" @click="onClickWeek1" class="query-form-week-month">{{$t('index.thisWeek')}}</Button>
									</span>
									<span>
										<Button type="text" @click="onClickMonth1" class="query-form-week-month">{{$t('index. thisMonth')}}</Button>
									</span>
								</div>
					        </FormItem>
						</Form>
					</div>
			  		<div class="echarts">
						<template>
							<ve-line :data="saleChartData" :extend="extend" :settings="saleChartSettings"></ve-line>
						</template>
			    		<!--<IEcharts :option="saleChart" @ready="onReady1" @click="onClick1"></IEcharts>-->
			  		</div>
			  	</div>
  			</Col>
  		</Row>
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
//	import IEcharts from 'vue-echarts-v3/src/full.vue';
	export default {
		components: {
//  		IEcharts
  		},
		data(){
			this.extend = {
				series: {
				label: {
					normal: {
					show: true
					}
				}
				}
			}
			this.chartSettings = {
				labelMap: {
				'createDate': '日期',
				'amount': '订单数'
				},
				legendName: {
				'订单统计': '订单统计'
				}
			}
			this.saleChartSettings = {
				labelMap: {
				'createDate': '日期',
				'amount': '销售额'
				},
				legendName: {
				'订单统计': '订单统计'
				}
			}
			return {
				chartData: {
					columns: ['createDate', 'amount'],
					rows: [
						
					]
				},
				saleChartData: {
					columns: ['createDate', 'amount'],
					rows: [
						
					]
				},
				myChartLoading:true,
				saleChartLoading:true,
				//当天订单总量
				numForm:{
					createDate:null,
					amount:null
				},
				//当天销售总额
				amountForm:{
					createDate:'',
					amount:'',
					symbol:''
				},
				//前一天销售总额
				yesterdayForm:{
					createDate:null,
					amount:null,
					symbol:''
				},
				//7天的销售总额
				weekForm:{
					createDate:null,
					amount:null,
					symbol:''
				},
				//已支付订单总数
				myChart: {
			        title: {
			          text: '订单统计'
			        },
			        tooltip: {},
			        xAxis: {
			        	name: '日期',
				        data: []
			        },
			        yAxis: {
			        	name: '成交量/笔',
			        },
			        series: [{
			          name: '日期:成交量',
			          type: 'line',
			          data: []
			        }]
			    },
				//订单统计查询项
				queryForm:{
					dates:[],
					startDate:null,
					endDate:null
				},
				//已支付订单总金额
				saleChart: {
			        title: {
			          text: '销售统计'
			        },
			        tooltip: {
			        },
			        xAxis: {
			            name: '日期',
				        data:[]
			        },
			        yAxis: {
			        	name: '总金额/元',
			        },
			        series: [{
			          name: '日期:总金额',
			          type: 'line',
			          data: []
			        }]
			    },
			    //销售统计查询项
			    querySaleForm:{
			    	dates:[],
			    	startDate:null,
					endDate:null
			    }
			}
		},
		computed: {
		},
		mounted() {
			this.init();
			// 当前选择的语言版本
			let getCurrentLanguage=localStorage.getItem('currentLanguage');
			this.$i18n.locale=getCurrentLanguage;
			// 英文
			if(this.$i18n.locale=='en'){
				this.chartSettings = {
					labelMap: {
					'createDate': 'date',
					'amount': 'number of order'
					},
					legendName: {
					'订单统计': 'Order statistics'
					}
				}
				this.saleChartSettings = {
					labelMap: {
					'createDate': 'date',
					'amount': 'Sales'
					},
					legendName: {
					'订单统计': 'Order statistics'
					}
				}
			}else if(this.$i18n.locale=='it'){
				// 意大利
				this.chartSettings = {
					labelMap: {
						'createDate': 'data',
						'amount': "Numero dell'ordine"
					},
					legendName: {
						'订单统计': 'Ordina le statistiche'
					}
				}
				this.saleChartSettings = {
					labelMap: {
						'createDate': 'data',
						'amount': 'Vendite'
					},
					legendName: {
						'订单统计': 'Ordina le statistiche'
					}
				}
			}

		},
		methods: {
			init(){
				this.query();
				this.onClickWeek();
				this.onClickWeek1();	
			},
			query(){
				const _this = this;
				this.axios.get('/ws/ms/orderCensuss/num').then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						_this.numForm = res.data;
					}else{
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('查询失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('Query failed:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Query fallita:' + message_);
						}
						
					}
				});
				this.axios.get('/ws/ms/orderCensuss/amount').then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						if (res.data == null) {
							_this.amountForm.amount = 0;
						}else{
							_this.amountForm = res.data;
						}
						
					}else{
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('查询失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('Query failed:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Query fallita:' + message_);
						}
					}
				});
				this.axios.get('/ws/ms/orderCensuss/yesterday').then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						if (res.data == null) {
							_this.yesterdayForm.amount = 0;
						}else{
							_this.yesterdayForm = res.data;
						}	
					}else{
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('查询失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('Query failed:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Query fallita:' + message_);
						}
					}
				});
				this.axios.get('/ws/ms/orderCensuss/week').then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						if (res.data == null) {
							_this.weekForm.amount = 0;
						}else{
							_this.weekForm = res.data;
						}	
					}else{
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('查询失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('Query failed:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Query fallita:' + message_);
						}
					}
				});
			},
			queryNum(){
				const that = this;
				that.chartData.rows = [];
				this.axios.post('/ws/ms/orderCensuss/condition',this.queryForm).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						for (var i = res.data.length - 1; i >= 0; i--) {
							let obj = {};
							obj.amount = res.data[i].amount;
							obj.createDate = res.data[i].createDate.substring(8,10)
							that.chartData.rows.push(obj);
						}
						console.log(that.chartData.rows);
					}else{
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('查询失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('Query failed:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Query fallita:' + message_);
						}
					}
				});
			},
			
			queryAmount(){
				const _this = this;
				_this.saleChartData.rows = [];
				this.axios.post('/ws/ms/orderCensuss/amountSum',this.querySaleForm).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						for (var i = res.data.length - 1; i >= 0; i--) {
							let obj = {};
							obj.amount = res.data[i].amount;
							obj.createDate = res.data[i].createDate.substring(8,10)
							_this.saleChartData.rows.push(obj);
						}
					}else{
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='zh'){
							_this.$Message.warning('查询失败:' + message_);
						}else if(_this.$i18n.locale=='en'){
							_this.$Message.warning('Query failed:' + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning('Query fallita:' + message_);
						}
					}
				});
			},
			onReady(){
				this.onClick();
			},
			onReady1(){
				this.onClick1();
			},
			//订单统计查询
			onClick(){
				if (this.queryForm.startDate == null) {
					var date_=new Date();
 					date_.setDate(1);
 					this.queryForm.startDate=Util.date.formatDate(date_, 'yyyy-MM-dd');
				}
				if (this.queryForm.endDate == null) {
					var endDate = new Date();
					endDate.setMonth(endDate.getMonth()+1);
					endDate.setDate(0);
					this.queryForm.endDate=Util.date.formatDate(endDate, 'yyyy-MM-dd');
				}
				this.queryForm.dates=[this.queryForm.startDate,this.queryForm.endDate];
				let days = new Date(this.queryForm.endDate).getTime() - new Date(this.queryForm.startDate).getTime();
				let dayNum = parseInt(days / (1000 * 60 * 60 * 24));
				if (dayNum>31) {
					if(this.$i18n.locale=='zh'){
						this.$Message.warning('请选择一个月的时间区间');
					}else if(this.$i18n.locale=='en'){
						this.$Message.warning('Please select a time interval of one month');
					}else if(this.$i18n.locale=='it'){
						this.$Message.warning('Si prega di selezionare un intervallo di tempo di un mese');
					}
					
				}else{
					this.queryNum();
				}
				
			},
			//销售统计查询
			onClick1(){
				if (this.querySaleForm.startDate == null) {
					var date_=new Date();
 					date_.setDate(1);
 					this.querySaleForm.startDate=Util.date.formatDate(date_, 'yyyy-MM-dd');
				}
				if (this.querySaleForm.endDate == null) {
					var endDate = new Date();
					endDate.setMonth(endDate.getMonth()+1);
					endDate.setDate(0);
					this.querySaleForm.endDate=Util.date.formatDate(endDate, 'yyyy-MM-dd');
				}
				this.querySaleForm.dates=[this.querySaleForm.startDate,this.querySaleForm.endDate];
				let days = new Date(this.querySaleForm.endDate).getTime() - new Date(this.querySaleForm.startDate).getTime();
				let dayNum = parseInt(days / (1000 * 60 * 60 * 24));
				if (dayNum>31) {
					if(this.$i18n.locale=='zh'){
						this.$Message.warning('请选择一个月的时间区间');
					}else if(this.$i18n.locale=='en'){
						this.$Message.warning('Please select a time interval of one month');
					}else if(this.$i18n.locale=='it'){
						this.$Message.warning('Si prega di selezionare un intervallo di tempo di un mese');
					}
				}else{
					console.log("0123");
					
					this.queryAmount();
				}
				
			},
			onClickWeek(){
				let currDate_=new Date();
				let week_ = parseInt(currDate_.getDay());
				let startDate_ = new Date(currDate_.getTime()-(1000 * 60 * 60 * 24 * (week_)));
				let endDate_ = new Date(currDate_.getTime()+(1000 * 60 * 60 * 24 * (7-week_-1)));
				this.queryForm.startDate=Util.date.formatDate(startDate_, 'yyyy-MM-dd');
				this.queryForm.endDate=Util.date.formatDate(endDate_, 'yyyy-MM-dd');
				this.queryForm.dates=[this.queryForm.startDate,this.queryForm.endDate];
				this.queryNum();
			},
			onClickLastWeek(){
				let currDate_=new Date();
				let week_ = parseInt(currDate_.getDay());
				let startDate_ = new Date(currDate_.getTime()-(1000 * 60 * 60 * 24 * (week_ + 7)));
				let endDate_ = new Date(startDate_.getTime()+(1000 * 60 * 60 * 24 * 6));
				this.queryForm.startDate=Util.date.formatDate(startDate_, 'yyyy-MM-dd');
				this.queryForm.endDate=Util.date.formatDate(endDate_, 'yyyy-MM-dd');
				this.queryForm.dates=[this.queryForm.startDate,this.queryForm.endDate];
				this.queryNum();
			},
			onClickMonth(){
				let startDate=new Date();
 				startDate.setDate(1);
 				this.queryForm.startDate = Util.date.formatDate(startDate, 'yyyy-MM-dd');
 				let endDate = new Date();
				endDate.setMonth(endDate.getMonth()+1);
				endDate.setDate(0);
				this.queryForm.endDate = Util.date.formatDate(endDate, 'yyyy-MM-dd');
				this.queryForm.dates=[this.queryForm.startDate,this.queryForm.endDate];
				this.queryNum();
			},
			onClickLastMonth(){
				let firstDate = new Date(new Date().getFullYear(), new Date().getMonth()-1, 1);
				let date = new Date();
				let day = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
				let endDate = new Date(new Date().getFullYear(), new Date().getMonth()-1, day);
 				this.queryForm.startDate = Util.date.formatDate(firstDate, 'yyyy-MM-dd');
				this.queryForm.endDate = Util.date.formatDate(endDate, 'yyyy-MM-dd');
				this.queryForm.dates=[this.queryForm.startDate,this.queryForm.endDate];
				this.queryNum();
			},
			onClickWeek1(){
				let currDate_=new Date();
				let week_ = parseInt(currDate_.getDay());
				let startDate_ = new Date(currDate_.getTime()-(1000 * 60 * 60 * 24 * (week_)));
				let endDate_ = new Date(currDate_.getTime()+(1000 * 60 * 60 * 24 * (7-week_-1)));
				this.querySaleForm.startDate=Util.date.formatDate(startDate_, 'yyyy-MM-dd');
				this.querySaleForm.endDate=Util.date.formatDate(endDate_, 'yyyy-MM-dd');
				this.querySaleForm.dates=[this.querySaleForm.startDate,this.querySaleForm.endDate];
				this.queryAmount();
			},
			onClickLastWeek1(){
				let currDate_=new Date();
				let week_ = parseInt(currDate_.getDay());
				let startDate_ = new Date(currDate_.getTime()-(1000 * 60 * 60 * 24 * (week_ + 7)));
				let endDate_ = new Date(startDate_.getTime()+(1000 * 60 * 60 * 24 * 6));
				this.querySaleForm.startDate=Util.date.formatDate(startDate_, 'yyyy-MM-dd');
				this.querySaleForm.endDate=Util.date.formatDate(endDate_, 'yyyy-MM-dd');
				this.querySaleForm.dates=[this.querySaleForm.startDate,this.querySaleForm.endDate];
				this.queryAmount();
			},
			onClickMonth1(){
				let startDate=new Date();
 				startDate.setDate(1);
 				this.querySaleForm.startDate = Util.date.formatDate(startDate, 'yyyy-MM-dd');
 				let endDate = new Date();
				endDate.setMonth(endDate.getMonth()+1);
				endDate.setDate(0);
				this.querySaleForm.endDate = Util.date.formatDate(endDate, 'yyyy-MM-dd');
				this.querySaleForm.dates=[this.querySaleForm.startDate,this.querySaleForm.endDate];
				this.queryAmount();
			},
			onClickLastMonth1(){
				let firstDate = new Date(new Date().getFullYear(), new Date().getMonth()-1, 1);
				let date = new Date();
				let day = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
				let endDate = new Date(new Date().getFullYear(), new Date().getMonth()-1, day);
 				this.querySaleForm.startDate = Util.date.formatDate(firstDate, 'yyyy-MM-dd');
				this.querySaleForm.endDate = Util.date.formatDate(endDate, 'yyyy-MM-dd');
				this.querySaleForm.dates=[this.querySaleForm.startDate,this.querySaleForm.endDate];
				this.queryAmount();
			},
			//查询时间段
			changeTime(date_){
				this.queryForm.dates = date_;
				this.queryForm.startDate = date_[0];
				this.queryForm.endDate = date_[1];
			},
			changeTime1(date_){
				this.querySaleForm.dates = date_;
				this.querySaleForm.startDate = date_[0];
				this.querySaleForm.endDate = date_[1];
			},
		}
	}
</script>

<style>
  	.echarts {
		width: 96%;
		height: 400px;
	    padding-bottom :30px;
	    margin-top: 90px;
  	}
	.layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-query{
    	float: left;
    	margin-top: 10px;
    	width: 100%;
    }
    .page-row-col-order{
    	display: block;
    	font-size: 14px;
    	color: #636363;
    }
    .page-row-col-order-number{
    	display: block;
    	font-weight: bold;
    	font-size: 16px;
    	padding-left: 48%;
    }
    .page-row-col-span{
    	display: inline-block;
    	margin: 2px 0 0 14px;
    }
    .page-row-col-icon{
    	float: left;
    }
    .query-form-week-month{
    	font-size: 14px;
    	font-weight: 600;
    }
</style>